<template>
  <div class="g-wrap">
    <div class="w-paihang-top">
      <div class="img-box">
        <img :src="gequ.coverImgUrl" alt="" />
      </div>
      <div class="top-right">
        <div>
          <h2>{{ gequ.name }}</h2>
        </div>
        <div class="time">
          <i class="icon"></i>
          <span
            >最近更新：{{ zhuanhuan(gequ.trackNumberUpdateTime).month }}月{{
              zhuanhuan(gequ.trackNumberUpdateTime).day
            }}日</span
          >
          <span>（{{ asd }}）</span>
        </div>
        <div class="fn-box">
          <a href="" class="bofangbtn">
            <i class="bofangbtn-i"></i>
            <span>播放</span>
          </a>
          <a href="" class="tianjiabtn"></a>
          <a href="" class="shouchangbtn">
            <i class="shouchangbtn-i"> ({{ gequ.subscribedCount }}) </i>
          </a>
          <a href="" class="fenxiangbtn">
            <i class="fenxiangbtn-i"> ({{ gequ.shareCount }}) </i>
          </a>
          <a href="" class="xiazaibtn">
            <i class="xiazaibtn-i"> 下载 </i>
          </a>
          <a href="" class="liuyanbtn">
            <i class="liuyanbtn-i">({{ gequ.commentCount }})</i>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="g-wrap12">
    <div class="g-wrap12-nav">
      <div class="nav-left">
        <h2 style="margin: 0">歌曲列表</h2>
        <p style="margin-left: 10px"><span>100</span>首歌</p>
      </div>
      <div>
        播放：<span class="cishu">{{ gequ.playCount }}</span
        >次
      </div>
    </div>
    <div class="g-wrap12-comtent">
      <ol>
        <li v-for="(item, index) in gequ.tracks.slice(0, 3)" :key="index">
          <div class="li-box">
            <div class="box-li">
              <span>{{ index + 1 }}</span>
              <div class="img-box-small" style="margin-left: 40px">
                <img :src="item.al.picUrl" alt="" />
              </div>
            </div>
            <div class="title">
              <a class="icon" @click="bofang(item.id)" href="javascript:;"></a>
              <span style="margin-left: 40px">{{ item.name }}</span>
            </div>
            <div>
              <span style="margin-left: 40px">{{ item.ar[0].name }}</span>
            </div>
          </div>
        </li>
        <li v-for="(item, index) in gequ.tracks.slice(3)" :key="index">
          <div class="li-box">
            <div class="box-li">
              <div class="small-box">
                <span>{{ index + 4 }}</span>
              </div>
              <div class="title1">
                <a class="icon" @click="bofang(item.id)" href="javascript:;"></a>
                <span style="margin-left: 40px">{{ item.name }}</span>
              </div>
            </div>

            <div>
              <span style="margin-left: 40px">{{ item.ar[0].name }}</span>
            </div>
          </div>
        </li>
      </ol>
      
    </div>
  </div>
</template>

<script>
export default {
  props: ["gequ", "list"],
  data() {
    return {};
  },
  methods: {
    zhuanhuan(time) {
      let a = new Date(time);
      return {
        month: a.getMonth() + 1,
        day: a.getDate(),
      };
    },
    bofang(id){
        this.$store.commit("gaibianid",id)
    }
  },
  computed: {
    asd() {
      return this.$store.state.gengxin;
    },
  },
};
</script>

<style lang="less" scoped>
.icon {
  display: inline-block;
  background: url("../imgs/iconall.png") no-repeat 0 -85px;
  width: 25px;
  height: 22px;
}
.small-box {
  width: 50px;
}
.title {
  text-align: left;
  width: 326px;
  height: 70px;
  display: flex;
  align-items: center;
}
.title > span,
.title1 > span {
  width: 326px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title1 {
  text-align: left;
  width: 326px;
  height: 30px;
  display: flex;
}
.g-wrap12-comtent {
  padding: 0px 30px 40px 40px;
}
.li-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  .box-li {
    display: flex;
    align-items: center;
  }
}
.img-box-small > img {
  width: 50px;
}
.cishu {
  color: #c20c0c;
}
.g-wrap12-nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0px 30px 0px 40px;
  .nav-left {
    display: flex;
    align-items: flex-end;
  }
}

.img-box {
  width: 158px;
  height: 158px;
  border: 1px solid rgb(204, 204, 204);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 150px;
    height: 150px;
    line-height: 158px;
  }
}
.top-right {
  margin-left: 25px;
}
.time {
  margin: 0 0 20px;
  line-height: 35px;
  .icon {
    display: inline-block;
    background: url("../imgs/icon.png") no-repeat -18px -682px;
    width: 13px;
    height: 13px;
    margin: 9px 0px 0px 3px;
    margin-right: 5px;
  }
}
h2 {
  line-height: 24px;
  font-size: 20px;
  font-weight: normal;
  margin: 16px 0 4px;
}
.liuyanbtn {
  background: url("../imgs/button2.png") no-repeat -167px -1020px;
  width: 83px;
  height: 31px;
  position: relative;
  .liuyanbtn-i {
    background: url("../imgs/button2.png") no-repeat 0 -1465px;
    width: 79px;
    height: 31px;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 0px 0px 0px 25px;
    color: #000;
    box-sizing: border-box;
    font-style: normal;
  }
}
.xiazaibtn {
  background: url("../imgs/button2.png") no-repeat -191px -1020px;
  width: 59px;
  height: 31px;
  position: relative;
  .xiazaibtn-i {
    background: url("../imgs/button2.png") no-repeat 0 -2761px;
    width: 54px;
    height: 31px;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 0px 0px 0px 25px;
    color: #000;
    box-sizing: border-box;
    font-style: normal;
  }
}
.fenxiangbtn {
  background: url("../imgs/button2.png") no-repeat -161px -1020px;
  width: 89px;
  height: 31px;
  position: relative;
  .fenxiangbtn-i {
    background: url("../imgs/button2.png") no-repeat 0 -1225px;
    width: 84px;
    height: 31px;
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 0px 0px 0px 25px;
    color: #000;
    box-sizing: border-box;
    font-style: normal;
  }
}
.shouchangbtn {
  background: url("../imgs/button2.png") no-repeat -161px -1020px;
  width: 89px;
  height: 31px;
  position: relative;
  .shouchangbtn-i {
    display: inline-block;
    background: url("../imgs/button2.png") no-repeat 0 -977px;
    width: 84px;
    height: 31px;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 0px 0px 0px 25px;
    color: #000;
    box-sizing: border-box;
    font-style: normal;
  }
}
.tianjiabtn {
  background: url("../imgs/button2.png") no-repeat 0 -1588px;
  width: 32px;
  height: 31px;
}
.bofangbtn {
  background: url("../imgs/button2.png") no-repeat 0 -3460px;
  width: 66px;
  height: 31px;
  line-height: 31px;
  margin-right: 0px !important;
  .bofangbtn-i {
    display: inline-block;
    margin: 6px 2px 2px 0px;
    background: url("../imgs/button2.png") no-repeat 0 -1622px;
    width: 20px;
    height: 18px;
    vertical-align: -6px;
  }
}
.g-wrap {
  padding: 40px;
}
.w-paihang-top {
  display: flex;
}
.fn-box > a {
  display: inline-block;
  height: 31px;
  line-height: 31px;
  overflow: hidden;
  vertical-align: top;
  text-align: center;
  cursor: pointer;
  margin-right: 5px;
}
a {
  color: #fff;
}
</style>